//Functionized, to reduce its size a bit
//SeanJA

//paint colours
var currentcolor;
var black;
var blue;
var green;
var red;
var yellow;
var white;
var purple;

//brush sizes
var currentbrush;
var smallbox;
var small;
var mediumbox;
var medium;
var largebox;
var large;

//function definitions
function setColour(color){
	currentcolor = color;
	eval(color).attr("opacity", 1);
	if(currentcolor != 'black'){
		black.attr("opacity", 0.5);
	}
	if(currentcolor != 'red'){
		red.attr("opacity", 0.5);
	}
	if(currentcolor != 'blue'){
		blue.attr("opacity", 0.5);
	}
	if(currentcolor != 'green'){
		green.attr("opacity", 0.5);
	}
	if(currentcolor != 'yellow'){
		yellow.attr("opacity", 0.5);
	}
	if(currentcolor != 'purple'){
		purple.attr("opacity", 0.5);
	}
	if(currentcolor != 'white'){
		white.attr("opacity", 0.5);
	}
	return true;
}

function setBrushSize(size){
	if(size == 'small'){
		currentbrush="4";
		small.attr("opacity", 1);
		medium.attr("opacity", 0.5);
		large.attr("opacity", 0.5);
	}
	else if(size == 'medium'){
		currentbrush="8";
		small.attr("opacity", 0.5);
		medium.attr("opacity", 1);
		large.attr("opacity", 0.5);
	}
	else if(size == 'large'){
		currentbrush="16";
		small.attr("opacity", 0.5);
		medium.attr("opacity", 0.5);
		large.attr("opacity", 1);
	}
}

$(document).ready(function(){
    //replace the comment form with ours
    $("#commentform").prepend('<input type="button" value="Draw!" id="drawbutton" /><br /><br /><div style="display: none" id="graffiti_comment"><div id="toolbar"><span id="colorpicker"></span><span id="brushes"></span></div><div id="graffiti"></div></div><textarea rows="10" cols="55" id="commenttext"></textarea>');
    $("#commentform #comment").hide();
    
    var colours = Raphael("colorpicker", 215, 35);

    $("#drawbutton").click(function(){
        $("#graffiti_comment").show("slow"); 
    });
    
    //set up the colour picker
    black = colours.rect(10,5,20,20,5);
	black.attr("fill", "black");
	black.attr("opacity", 1);
    $(black[0]).click(function(){
		setColour('black');
	});
    
	red = colours.rect(40,5,20,20,5);
	red.attr("fill", "red");
	red.attr("opacity", 0.5);
    $(red[0]).click(function(){
		setColour('red');
	});
    
	blue = colours.rect(70,5,20,20,5);
	blue.attr("fill", "blue");
	blue.attr("opacity", 0.5);    
    $(blue[0]).click(function(){setColour('blue');});
    
	green = colours.rect(100,5,20,20,5);
	green.attr("fill", "green");
	green.attr("opacity", 0.5);
    $(green[0]).click(function(){setColour('green');});
    
	yellow = colours.rect(130,5,20,20,5);
	yellow.attr("fill", "yellow");
	yellow.attr("opacity", 0.5);    
    $(yellow[0]).click(function(){setColour('yellow');});
    
	purple = colours.rect(160,5,20,20,5);
	purple.attr("fill", "purple");
	purple.attr("opacity", 0.5);
    $(purple[0]).click(function(){setColour('purple');});
    
 	white = colours.rect(190,5,20,20,5);
	white.attr("fill", "white");
	white.attr("opacity", 0.5);
    $(white[0]).click(function(){setColour('white');});
    
    //set up the brush sizer
    var brushes = Raphael("brushes", 200,35);
    smallbox = brushes.rect(10,5,20,20,5);
    small = brushes.circle(20, 15, 2);
    small.attr("fill", "black");
    smallbox.attr("fill", "white");
    $(small[0]).click(function(){setBrushSize('small');});
	
    $(smallbox[0]).click(function(){setBrushSize('small');});
    
    mediumbox = brushes.rect(40,5,20,20,5);
    medium = brushes.circle(50, 15, 4);
	medium.attr("fill", "black");
    mediumbox.attr("fill", "white");
    $(medium[0]).click(function(){setBrushSize('medium');});
    $(mediumbox[0]).click(function(){setBrushSize('medium');});
    
    largebox = brushes.rect(70,5,20,20,5);
    large = brushes.circle(80, 15, 8);
    large.attr("fill", "black");
    largebox.attr("fill", "white");
    $(large[0]).click(function(){setBrushSize('large');});
    $(largebox[0]).click(function(){setBrushSize('large');});
    
    var brushcolor = new Array();
    var brushsize = new Array();
    
    //undo button
    var undobox = brushes.rect(100,5,40,20,5);
    var undotext = brushes.text(120,19, "Undo");
    
    //clear button
    var clearbox = brushes.rect(150,5,40,20,5);
    var cleartext = brushes.text(170,19,"Clear");
    
    //default settings
    
   //set up the drawing canvas
   var paper = Raphael("graffiti", 450, 200);
   var cursor = paper.circle(999,999,2);
   
   
   //initialize variables
   var count = 0;
   var xs = new Array();
   var ys = new Array();
   var c = new Array();
   var d = new Array();
   var liney = new Array();
   var clicking = 0;
   var TheDrawing = new Array();
   
   //UNDO button
   $(undotext[0]).click(function(){
	if (count > 0) {
	    c[count-1].attr("opacity", 0);
	    if (liney[count-1]) { d[count-1].attr("opacity", 0); }
	    liney[count-1]=0;
	    count--;
	}
   });
   
   //CLEAR button
   $(cleartext[0]).click(function(){
        xval = 0;
        yval = 0;
        count = 0;
        liney[count] = 0;
        brushcolor[count] = "white";
        brushsize[count] = "9999";
        c[count] = paper.circle(xval, yval, brushsize[count]);
        c[count].attr("fill", brushcolor[count]);
        c[count].attr("stroke", brushcolor[count]);
        xs[count] = xval;
        ys[count] = yval;
        count++;
   });
   
   //clicking down the mouse button on the canvas
   $("#graffiti").mousedown(function(e){
        var gpos = $(this).position();
        var xval = e.pageX - gpos.left;
        var yval = e.pageY - gpos.top;
        liney[count] = 0;
        brushcolor[count] = currentcolor;
        brushsize[count] =  currentbrush;
        clicking = 1;
        c[count] = paper.circle(xval, yval, currentbrush/2);
        c[count].attr("fill", brushcolor[count]);
        c[count].attr("stroke", brushcolor[count]);
        xs[count] = xval;
        ys[count] = yval;
        count++;
   });
   
   //letting go of the mouse button, even off the canvas
   $(document).mouseup(function(){
        clicking = 0;
   });
   
   //moving the cursor over the canvas
   $("#graffiti").mousemove(function(e){
        var gpos = $(this).position();
        var xval = e.pageX - gpos.left;
        var yval = e.pageY - gpos.top;        
        brushcolor[count] = currentcolor;
        brushsize[count] = currentbrush;
	cursor.show();
        cursor.attr("cx", xval);
        cursor.attr("cy", yval);
        cursor.attr("fill", brushcolor[count]);
        cursor.toFront();
	//cursor outline
	if (brushcolor[count] != "black") {
	    cursor.attr("stroke", "black");
	} else {
	    cursor.attr("stroke", "white");
	}
        cursor.attr("r", brushsize[count]/2);
        if (clicking) {
            d[count] = paper.path({"stroke-width": brushsize[count], stroke: brushcolor[count], "stroke-linecap": "round"}).moveTo(xs[count-1], ys[count-1]).lineTo(xval, yval);
            liney[count] = 1;
            c[count] = paper.circle(xval, yval, brushsize[count]/3);
            c[count].attr("fill", brushcolor[count]);
            c[count].attr("stroke", brushcolor[count]);
            xs[count] = xval;
            ys[count] = yval;
            count++;
        }
   });
   
   $("#graffiti").mouseout(function(){
	cursor.hide();
   });
   
   var NumberOfDrawings = 0;
   var newpaper = new Array();
   
   //Replace encoded comments with a drawing and caption
   $(".commentlist li p").each(function(){
        if ($(this).text().substring(0,13) == "[[[DRAWING]]]") {
            var drawcode = $(this).text();
            $(this).text("");
            
            //draw from the string
            var TheNewDrawing = new Array();
            TheNewDrawing = drawcode.split("[[[DRAWING]]]");
            TheNewDrawing = TheNewDrawing[1].split(",");
            var ntotal = TheNewDrawing[0];
            
            if (ntotal > 0) {
                $(this).prepend("<div class='graf'></div>");
                NumberOfDrawings ++;
                var currentcanvasdiv = $(this).children('.graf');
                $(currentcanvasdiv).attr("id", "graf-"+NumberOfDrawings);
                
                newpaper[NumberOfDrawings] = Raphael("graf-"+NumberOfDrawings, 450, 200);
                
                var j = new Array();
                var ox;
                var oy;
                for (var i = 1; i<TheNewDrawing.length-1; i+=5) {
                    var nx = TheNewDrawing[i];
                    var ny = TheNewDrawing[i+1];
                    var nliney = TheNewDrawing[i+2];
                    var nbrushcolor = TheNewDrawing[i+3];
                    var nbrushsize = TheNewDrawing[i+4];
                    
                    if (nliney == "1" && i > 5) {
                        var dl = newpaper[NumberOfDrawings].path({"stroke-width": nbrushsize, stroke: nbrushcolor, "stroke-linecap": "round"}).moveTo(ox, oy).lineTo(nx, ny);
                        j[i] = newpaper[NumberOfDrawings].circle(nx, ny,nbrushsize/3);
                    } else {
                        j[i] = newpaper[NumberOfDrawings].circle(nx, ny,nbrushsize/2);
                    }
                    
                    j[i].attr("fill", nbrushcolor);
                    j[i].attr("stroke", nbrushcolor);
                    ox = nx;
                    oy = ny;
                }
            }
            var thistext = drawcode.split("|||");
            $(this).append(thistext[1]);
        }
   });
   
   //SAVE button
   $("#submit").click(function(){
        //save the array
        TheDrawing.total = count;
        TheDrawing.xs = xs;
        TheDrawing.ys = ys;
        TheDrawing.liney = liney;
        TheDrawing.brushcolor = brushcolor;
        TheDrawing.brushsize = brushsize;
        
        //make the string
        var TheString = TheDrawing.total + ",";
        for (var i = 0; i<TheDrawing.total; i++){
            TheString += TheDrawing.xs[i] + ",";
            TheString += TheDrawing.ys[i] + ",";
            TheString += TheDrawing.liney[i] + ",";
            TheString += TheDrawing.brushcolor[i] + ",";
            TheString += TheDrawing.brushsize[i] + ",";
        }
        
        //TheString must be saved
        TheString += "|||" + $("#commenttext").val();
        
        TheString = "[[[DRAWING]]]" + TheString;
        
        $("#commentform #comment").val(TheString);
        
        return true;
        
   });
   setColour('black');
   setBrushSize('small');
});

